import { ActionType, ProList } from "@ant-design/pro-components";
import { Avatar, Button, Space } from "antd";
import React, { useRef } from "react";
import { queryProjectList } from "../../../api";
import SaveProject from "./components/SaveProject";
import { NavLink, Navigate } from "react-router-dom";
import { EditOutlined, EyeOutlined, LinkOutlined } from "@ant-design/icons";

const App = () => {
  const actionRef = useRef<ActionType>();
  const reload = () => {
    actionRef.current?.reload();
  };
  return (
    <ProList<any>
      actionRef={actionRef}
      request={async (a) => {
        const res = await queryProjectList(a);

        return res;
      }}
      toolbar={{
        search: {
          onSearch: (value: string) => {
            actionRef.current?.reload();
          },
        },
        actions: [
          <SaveProject>
            <Button key="3" type="primary" onClick={() => {}}>
              添加项目
            </Button>
          </SaveProject>,
        ],
      }}
      // pagination={{
      //   defaultPageSize: 8,
      //   showSizeChanger: false,
      // }}
      // showActions="hover"
      // rowSelection={{}}
      grid={{ gutter: 16, column: 4 }}
      // onItem={(record: any) => {
      //   return {
      //     onMouseEnter: () => {
      //       console.log(record);
      //     },
      //     onClick: () => {
      //       console.log(record);
      //     },
      //   };
      // }}
      metas={{
        title: {
          dataIndex: "name",

          // render(dom, entity, index, action, schema) {
          //     return <span>{entity.name}</span>
          // },
        },
        // subTitle: {
        //   render: () => {
        //     return (
        //       <Space size={0}>
        //      sss
        //       </Space>
        //     );
        //   },
        // },
        // description: {
        //   dataIndex: 'description',

        //   // render: () => {
        //   //   return 'Ant Design, a design language for background applications, is refined by Ant UED Team';
        //   // },
        // },
        avatar: {
          render(dom, entity, index, action, schema) {
            return (
              <div style={{ marginRight: 20 }}>
                <Avatar
                  size="large"
                  src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                />
              </div>
            );
          },
        },
        content: {
          render: (dom, entity) => (
            <div>
              <div>{entity.description}</div>
            </div>
          ),
        },
        actions: {
          cardActionProps: "actions",
          render: (dom, entity) => {
            return [
              <SaveProject reload={reload} payload={entity}>
                <a key="invite">
                  <EditOutlined style={{ marginRight: 5 }} />
                  编辑
                </a>
              </SaveProject>,
              <NavLink to={`/apiManage/${entity.id}/home`} type="link">
                <LinkOutlined/> 前往项目
              </NavLink>,
            ];
          },
        },
      }}
      headerTitle="项目列表"
      // dataSource={data}
    />
  );
};
export default App;
